<template>
	<view class="content">
		<!-- <view class="top">
			<view class="search">

				<text class="i iconfont icon-search"></text>
				<text class="txt">搜索</text>
			</view>

		</view> -->
		<search></search>
		<view class="middle">
			<swiper indicator-dots autoplay circular>
				<block v-for="(item,index) in imgList" :key="index">
					<swiper-item class="itemI">
						<image class="img" :src="item.image_src"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in navList" :key="index">
				<view class="img">
					<image :src="item.image_src"></image>
					<!-- <view class="txt">分类</view> -->
				</view>
			</view>
		</view>
		<block v-for="(item,myIndex) in bannerList" :key="myIndex">
			<view class="nav">
				<image :src="item.floor_title.image_src"></image>
			</view>
			<view class="banner">
				<view class="left">
					<!-- 原本只要遍历 product_list就行啦  但是我这结构样式没写好只能这样 详情见老师的结构样式
					用啦浮动-->
					<image :src="item.product_list[0].image_src"></image>
				</view>
				<view class="center">
					<view class="imgTop">

						<image :src="item.product_list[1].image_src"></image>
					</view>
					<view class="imgBottom">

						<image :src="item.product_list[3].image_src"></image>
					</view>
				</view>
				<view class="right">
					<view class="imgTop">

						<image :src="item.product_list[2].image_src"></image>
					</view>
					<view class="imgBottom">

						<image :src="item.product_list[4].image_src"></image>
					</view>
				</view>
			</view>
		</block>



	</view>
	</view>
</template>

<script>
	import search from "../../cpmponents/search.vue";
	export default {
		// 注册组件
		components:{
			search
		},
		data() {
			return {
				imgList: [],
				navList: [],
				bannerList: []
			}
		},
		onLoad() {
			// 每个接口请求都写个这个 有点繁琐 因此可以封装一下
			this.getList()
			// 轮播图数据图片
			// wx:request 在uniapp开发 全部换成uni开头
			// uniapp语法用的全是vue语法 和小程序不一样 
			// uni.request({
			// 	url: 'https://www.uinav.com/api/public/v1/home/swiperdata',
			// 	method: "GET", //默认get可以省略
			// 	// 这里要用箭头函数 因为那样this指向是当前实例 不然this.imgList报错
			// 	success: (res) => {
			// 		// console.log(res)
			// 		// uniapp用的是vue语法 因此不需要setData
			// 		// this.setData({
			// 		// 	imgList = res.data.message
			// 		// })
			// 		this.imgList = res.data.message
	 		// 		// window.consloe.log(this)
			// 	}
			// })
			// 导航栏数据图片
			// uni.request({
			// 	url: 'https://www.uinav.com/api/public/v1/home/catitems',

			// 	success: (res) => {
			// 		// console.log(res)
					

			// 		this.navList = res.data.message

			// 	}
			// })
			// uni.request({
			// 	url: "https://www.uinav.com/api/public/v1/home/floordata",
			// 	success: (res) => {
			// 		// console.log(res)
			// 		this.bannerList = res.data.message
			// 	}
			// })
		},
		methods: {

			async getList() {
				const resLun=await this.$http({url:"/home/swiperdata",method:'get'})
				this.imgList=resLun
				const resNav=await this.$http({url:"/home/catitems",method:'get'})
				this.navList=resNav
				const resBan=await this.$http({url:"/home/floordata",method:'get'})
				this.bannerList=resBan
			},

			
		}
	}
</script>

<style lang="less">
	@import url("../../static/icon/icon.css");

	.content {
		width: 100%;
// 搜索栏样式也封装到啦单独的组件
		// .top {
		// 	width: 100%;
		// 	height: 130rpx;

		// 	background-color: #eb4450;
		// 	box-sizing: border-box;
		// 	padding: 20rpx 15rpx;
		// 	position: fixed;
		// 	top: 0;
		// 	z-index: 1;

		// 	.search {
		// 		width: 100%;
		// 		height: 100%;
		// 		line-height: 90rpx;
		// 		text-align: center;
		// 		background-color: #fff;
		// 		border-radius: 5rpx;

		// 		.txt {
		// 			color: #cccccc;
		// 			margin-left: 5rpx;

		// 		}

		// 		.i {
		// 			color: #cccccc;
		// 			font-size: 26px;
		// 			vertical-align: middle;
		// 			margin-right: 5rpx;
		// 		}
		// 	}

		// }

		.middle {
			margin-top: 130rpx;
			swiper{
					height: 340rpx;
			}
		}

		.itemI {
			width: 100%;
			height: 100%;

			.img {
				width: 100%;
				height: 340rpx;
			}
		}

		.list {
			display: flex;
			padding: 40rpx 0;

			.item {
				width: 25%;
				text-align: center;
			}

			image {
				width: 130rpx;
				height: 130rpx;
			}
		}

		.nav {
			width: 100%;
			height: 120rpx;

			background-color: #f4f4f4;

			image {
				width: 100%;

				height: 70rpx;
				margin-top: 35rpx;

			}
		}

		.banner {
			display: flex;
			padding: 0 20rpx;
			margin-top: 20rpx;

			.left,
			.center,
			.right {
				width: 33.33%;

			}

			.left {
				margin-right: 15rpx;

				image {
					width: 100%;
					height: 440rpx;
				}

			}

			.center {
				margin-right: 20rpx;
			}

			.center,
			.right {


				.imgTop {
					width: 100%;
					height: 220rpx;
					margin-bottom: 10rpx;
				}

				.imgBottom {
					width: 100%;
					height: 220rpx;
					margin-bottom: 10rpx;
				}

				image {
					width: 100%;
					height: 215rpx;
				}
			}
		}
	}
</style>
